<!-- 分类详情 -->
<template>
	<view class="SortDetails">
		<u-navbar bgColor="#7bb7fd" :placeholder="true" :autoBack="true" leftIconColor="#fff" leftText="返回" leftIconSize="30rpx">
			<view class="nav-center-slot" slot="center">详情页</view>
			<view class="nav-right-slot" slot="right">收藏夹</view>
		</u-navbar>
		
		<view v-if="SortDetail">
			<u-notice-bar text="618促销,商店商品全场九折,更多优惠敬请关注官方网站。"></u-notice-bar>
			<img :src="SortDetail.pic" alt="" width="100%" />
			<view class="group">
				<view class="group-title">
					<view>
						<p class="u-line-1">{{ SortDetail.name }}</p>
						<span>鲜嫩爽口 清香入味</span>
						<br />
						<span class="tag">全面质检</span>
					</view>
					<view class="price">
						<span class="tag">九折</span>
						¥18.00
						<span class="originPrice">¥20.00</span>
					</view>
				</view>
				<view class="group-box">
					<span>配送</span>
					<span>立即下单,预计 今日17:21送达</span>
					<br />
					<span>促销</span>
					<span>满9.9可换购超值商品</span>
					<br />
					<span>已领券</span>
				</view>
			</view>
			<view class="goods-action">
				<view class="goods-action-icon">
					<u-icon name="chat" color="#323233" size="20" style="margin: 0 auto 5px;"></u-icon>
					<u-badge isDot absolute :offset="[5,8]"></u-badge>
					<span>客服</span>
				</view>
				<view class="goods-action-icon">
					<u-icon name="shopping-cart" color="#323233" size="20" style="margin: 0 auto 5px;"></u-icon>
					<u-badge value="1" numberType="overflow" max="99" absolute :offset="[0,0]"></u-badge>
					购物车
				</view>
				<view class="goods-action-icon">
					<u-icon name="star" color="#323233" size="20" style="margin: 0 auto 5px;"></u-icon>
					<u-badge value="1" numberType="overflow" max="99" absolute :offset="[0,0]"></u-badge>
					收藏
				</view>
				<view class="goods-action-icon">
					<u-button text="加入购物车" class="goods-action-button--first" @click="addCart"></u-button>
				</view>
				<view class="goods-action-icon">
					<u-button text="立即购买" class="goods-action-button--last" @click="submit"></u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { request_detail } from '@/api/http.js';
export default {
	data() {
		return {
			id: '',
			SortDetail: null,
			appkey: 'b0e7418fe9bef46dcb47a53374ffbef1'
		};
	},
	mounted() {
		this.id = this.$route.query.id
		this.getData();
	},
	methods: {
		async getData() {
			let data = {
				id: this.id,
				appkey: this.appkey
			};
			let res = await request_detail(data);
			this.SortDetail = res;
		},
		// 添加购物车
		addCart() {
			this.$refs.uToast.show({
			    type:'success',
			    message:'添加成功',
			})  
		},
		// 立即购买
		submit(){
			console.log('立即购买');
		},
	}
};
</script>

<style lang="scss" scoped>
.SortDetails {
	.nav-center-slot {
		font-size: 34rpx;
		font-weight: bold;
	}
	.nav-right-slot {
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
	}
	.u-notice-bar {
		position: fixed;
		width: 100%;
	}
	.group {
		text-align: justify;
		margin-left: 20rpx;
		p {
			width: 192px;
			font-size: 16px;
			font-weight: bold;
		}
		span {
			font-size: 26rpx;
		}
		&-title {
			margin-bottom: 20rpx;
			line-height: 44rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.tag {
				background: #1989fa;
				padding: 0 8rpx;
				color: #fff;
			}
			:nth-child(3) {
				color: #a4a4a5;
			}
			.price {
				position: relative;
				font-size: 48rpx;
				color: red;
				right: 20rpx;
				font-style: italic;
				.tag {
					margin-right: 6rpx;
					background: red;
				}
				.originPrice {
					margin-left: 8rpx;
					color: #969799;
					font-size: 20rpx;
					text-decoration: line-through;
				}
			}
		}
		&-box {
			margin-bottom: 20rpx;
			line-height: 70rpx;
			// 使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
			:nth-child(3n + 1) {
				margin-right: 40rpx;
				font-weight: bolder;
			}
		}
	}
	.goods-action{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&-icon{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			min-width: 96rpx;
			height: 100%;
			color: #646566;
			font-size: 20rpx;
			line-height: 1;
			text-align: center;
			cursor: pointer;
			.goods-action-button--first{
				color: #fff;
				width: 226rpx;
				margin-left: 10rpx;
				border-top-left-radius: 1998rpx;
				border-bottom-left-radius: 1998rpx;
				background: linear-gradient(to right,#ffd01e,#ff8917);
			}
			.goods-action-button--last{
				color: #fff;
				width: 226rpx;
				margin-right: 10rpx;
				border-top-right-radius: 1998rpx;
				border-bottom-right-radius: 1998rpx;
				background: linear-gradient(to right,#ff6034,#ee0a24);
			}
		}
		.goods-action-icon{
			position: relative;
		}
	}
}
</style>
